import { Form, Input, Button, Checkbox, message } from 'antd'

import './index.scss'
import logo from '../../assets/images/logo.png'
import { http, setToken } from '../../utils'
const Login = ({ history, location }) => {
  const onFinish = async values => {
    // console.log('Received values of form: ', values);
    const { code, mobile } = values
    try {
      const res = await http.post('/authorizations', { mobile, code })
      // console.log(res);
      //token本地存储
      // localStorage.setItem('geek_pc_87',res.data.data.token)
      setToken(res.data.data.token)
      // 路由编程式导航跳转页面 ,pathname值更改
      message.success('登录成功', 1, () => {
        if (location.state) {
          history.push(location.state.from)
        } else {
          history.push('/home')
        }
      })
      // console.log(history);
    } catch (e) {
      //打印e可以获取具体错误信息
      // 第一个参数：表示提示内容
      // 第二个参数：提示展示的时间长度，单位是秒
      message.warning(e.response.data.message, 1, () => {
        //提示消失之后执行
        //e.response.data.message  错误提示的子节点的值有我们锁需要的信息
        // console.dir(e)
      })
    }
  }
  return (
    <div className="login">
      <div className="login-wrapper">
        <div>
          <img className="logo" src={logo} alt="" />
        </div>
        <Form
          className="login-form"
          //   上线前需清理内测账号
          //   默认验证设置的值必须是字符串，否则会报错，发送请求无法获取
          initialValues={{ remember: true, mobile: '13911111111', code: '246810' }}
          onFinish={onFinish}
          size="large"
        >
          <Form.Item
            name="mobile"
            rules={[
              { required: true, message: '请输入手机号' },
              { pattern: /^1[3-9]\d{9}$/, message: '手机号码格式不对' },
            ]}
          >
            <Input placeholder="请输入手机号" maxLength={11} />
          </Form.Item>
          <Form.Item
            name="code"
            rules={[
              { required: true, message: '请输入验证码' },
              { pattern: /^\d{6}$/, message: '请输入正确的验证码' },
            ]}
          >
            <Input
              placeholder="请输入验证码"
              //   限制最大输入长度
              maxLength={6}
            />
          </Form.Item>
          {/* <Form.Item> */}
          {/* Form.Item配合 表单元素 来使用时，应该被Form.Item包裹住只用 ，并且表单项只能唯一 */}

          <Form.Item name="remember" valuePropName="checked">
            <Checkbox>我已阅读并同意用户协议和隐私条款</Checkbox>
          </Form.Item>
          {/* </Form.Item> */}

          <Form.Item>
            <Button block type="primary" htmlType="submit" className="login-form-button">
              登录
            </Button>
          </Form.Item>
        </Form>
      </div>
    </div>
  )
}
export default Login
